<template>
    <div class="page">
        <div class="header">
            <van-icon style="position: absolute; left: 20px; top: 35px;" name="arrow-left" @click="backHome" />
            <van-row class="tittle" justify="center">
                <van-col>收支分析</van-col>
            </van-row>
            <van-row class="selectDate">
                <van-field class="van_date" v-model="result" is-link readonly name="datePicker"
                    @click="showPicker = true" />
                <van-popup class="van_popup" v-model:show="showPicker" destroy-on-close position="bottom">
                    <van-date-picker :model-value="pickerValue" @confirm="onConfirm" @cancel="showPicker = false" />
                </van-popup>
            </van-row>
            <van-tabs :active="state.active" class="van_tabs">
                <van-tab class="van_tab" v-for="(item, index) in tabData" :name="index" :title="item.title" replace
                    :to="item.router" :key="item.id"></van-tab>
            </van-tabs>
        </div>
        <RouterView style="margin-top: 170px;" />
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { RouterView, useRoute, useRouter } from 'vue-router';

const router = useRouter();
const backHome = () => {
    router.replace('/');
} // 使用 replace 方法跳转到新页面 };

const tabData = ref([
    { id: 1, title: '支出', router: '/Home/Analysis/page1' },
    { id: 2, title: '收入', router: '/Home/Analysis/page2' },
])

const route = useRoute()
const state = reactive({
    active: Number(route.query.a) ? Number(route.query.a) : 0
})

const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');

const result = ref(`${year}/${month}/${day}`);
const showPicker = ref(false);
const pickerValue = ref([]);
const onConfirm = ({ selectedValues }) => {
    result.value = selectedValues.join('/');
    pickerValue.value = selectedValues;
    showPicker.value = false;
};

</script>

<style scoped src="@/static/Analysis/index.scss" />